<template>
  <el-card class="box-card">
    <div class="h_l">
      <div>
        <el-button @click="tabChange" icon="el-icon-menu"></el-button>
      </div>
      <div class="h_l_home">
        <el-breadcrumb separator="-">
          <!-- <el-breadcrumb separator-class="el-icon-arrow-right"> -->
          <el-breadcrumb-item
            v-for="item in tags"
            :key="item.id"
            :to="{ path: item.path }"
            >{{ item.label }}</el-breadcrumb-item
          >
        </el-breadcrumb>
      </div>
    </div>
    <div class="h_r">
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          <img src="../assets/images/headsculpture.png" alt="" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="a">退出</el-dropdown-item>
          <!-- <el-dropdown-item>狮子头</el-dropdown-item>
          <el-dropdown-item>螺蛳粉</el-dropdown-item>
          <el-dropdown-item disabled>双皮奶</el-dropdown-item>
          <el-dropdown-item divided>蚵仔煎</el-dropdown-item> -->
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </el-card>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "HeaderNavMenu",
  data() {
    return {};
  },
  computed: {
    ...mapState({
      tags: (state) => state.tab.tabList,
    }),
  },
  mounted() {
    // console.log(this.tags, "tags");
  },
  methods: {
    tabChange() {
      // sessionStorage.setItem("isCollapse", false);
      this.$store.commit("collapseMenu");
    },
    handleCommand(command) {
      if (command == "a") {
        window.localStorage.setItem("token", "");
        this.$router.push("/login");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.h_box {
  display: flex;
  justify-content: space-between;
  align-content: center;
  //   height: 80px;
}
.el-card {
  height: 80px;
  margin-top: 20px;
  /deep/.el-card__body {
    display: flex;
    justify-content: space-between;
    align-content: center;
    height: 40px;
    padding: 0;
    margin: 20px;
    .h_l {
      display: flex;
      align-items: center;
      .h_l_home {
        padding: 0 20px;
      }
      .h_l_home:hover {
        cursor: pointer;
      }
    }
    .h_r {
      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
    }
  }
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
